<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 立即购买-小米商城</title>
    <link rel="icon" href="/mi/imgs/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="/mi/css/common/header.css">
    <link rel="stylesheet" href="/mi/css/cart/add_cart.css">
    <link rel="stylesheet" href="/mi/css/iconfont/iconfont.css">
    <link rel="stylesheet" href="/mi/css/common/page_bottom.css">
    <link rel="icon" href="/mi/imgs/favicon.ico" type="image/x-icon" />

</head>

<body>
<div id="app">

    <!-- 定义头部 -->
    <%@include file="../common/header.jsp"%>
    <!-- 定义头部end -->
    <!-- start 手机概述参数导航栏 -->
    <div class="cart_nav">
        <div class="cart_nav_container">
            <h2 id="proName"> 电视 大师 77"OLED
            </h2>
            <div class="left">
                <span>|</span>
                <a href="#">电视 大师 77"OLED
                </a>
            </div>
            <div class="right">
                <a href="/mi/product/overview?productId=">概述页</a>
                <span>|</span>
                <a href="javascript:go_parameter()">参数页</a>
                <span>|</span>
                <a href="#">F码通道</a>
                <span>|</span>
                <a href="#">咨询客服</a>
                <span>|</span>
                <a href="/mi/product/comment">用户评价</a>
            </div>
        </div>
    </div>
    <!-- end 手机概述,参数导航栏 -->
    <!--  start 详情 -商品介绍  -->
</div>
<div id="cart_detail">
    <div class="container">
        <div class="detail_left">
            <img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1628162459.67483588.jpg">
        </div>
        <div class="detail_right">
            <h2>小米电视 大师 77" OLED</h2>
            <p class="cc">
                <font color="#ff4a00">「到手价17999元！12期免息！首装免费！」「小米电视焕新季」「价保30天，买贵补差」</font>
                全新一代OLED屏幕,原色屏Pro,1000nits峰值亮度,哈曼卡顿专业调校,双120Hz高刷屏
            </p>
            <p class="ziying"
               title="企业名称：小米通讯技术有限公司
                企业执照注册号：91110108558521630L
                企业地址：北京市海淀区西二旗中路33号院6 号楼9层019号
                企业电话：400-100-5678
                营业期限：2010年08月25日 至 2040年08月24日
                经营范围：开发手机技术、计算机软件及信息技术；技术检测、技术咨询、技术服务、技术转让；计算机技术培训；系统集成；货物进出口、技术进出口、代理进出口；家用电器、通信设备、广播电视设备（不含卫星电视广播、地面接收装置）、机械设备、电子产品、文化用品的批发零售；维修仪器仪表；销售医疗器械I类、II、III类、针纺织品（含家纺家饰）、服装鞋帽、日用杂货、工艺品、文化用品、体育用品、照相器材、卫生用品（含个人护理用品）、钟表眼镜、箱包、家具（不从事实体店铺经营）、小饰品、日用品、乐器、自行车、智能卡；计算机、通讯设备、家用电器、电子产品、机械设备的技术开发、技术服务；销售金银饰品（不含金银质地纪念币）；家用空调的委托生产；委托生产翻译机；销售翻译机、五金交电（不含电动自行车）、厨房用品、陶瓷制品、玻璃制品、玩具、汽车零配件、食用农产品、花卉、苗木、宠物用品、建筑材料、装饰材料、化妆品、珠宝首饰、通讯设备、卫生间用品、农药；生产手机（仅限在海淀区永捷北路2号三层生产及外埠生产）；出版物批发；出版物零售；销售食品。（销售第三类医疗器械以及销售食品以及依法须经批准的项目，经相关部门批准后依批准的内容开展经营活动。）">
                小米自营
            </p>
            <p class="price-info">
                <span id="headPrice">17999&nbsp;元</span>
                <span style="font-size: 14px;margin-left: 5px;color: #b0b0b0;text-decoration: line-through">19999 元</span>
            </p>
            <div class="line"></div>
            <div class="zeng">
                <span>赠完即止</span>
                <span>Xiaomi MIX 4买赠价值69元单动圈耳机</span>
            </div>
            <div class="address-box">
                <div class="product-address">
                    <i class="iconfont">&#xe606;</i>
                    <div class="address-con">
                        <div class="address-info">
                            <span>北京</span>
                            <span>北京市</span>
                            <span>海淀区</span>
                            <span>清河街道</span>
                            <a href="#" class="edit">修改</a>
                        </div>

                    </div>
                    <div class="info">
                        <div class="desc">
                            <span>有现货</span>
                        </div>
                    </div>
                </div>

            </div>
            <!-- 选择版本 -->
            <div class="buy-option">
                <div class="buy-child" style="height: 100px;margin-bottom: 0px">
                    <div class="buy-box">
                        <div class="title" style="font-size: 18px;color: #333;margin-top: 20px;" >选择颜色</div>
                        <ul >
                                <li name="memeryLi" style="cursor: pointer;border: 1px solid rgb(255, 103, 0);" >
                                    <input type="hidden" value="">
                                    <a style="color:rgb(255, 103, 0);">黑色</a>
                                </li>
                        </ul>
                    </div>
                </div>
                <div class="buy-child" style="margin: 0px">
                    <div class="buy-box">
                        <div class="title" style="font-size: 18px;color: #333;margin-top: 20px;"  >选择尺寸</div>
                        <ul>

                                <li name="colorLi" style="cursor: pointer;border: 1px solid rgb(255, 103, 0);"><a style="color:rgb(255, 103, 0);">77英寸</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- end 选择版本 -->
            <div class="selected-list">
                <ul>
                    <li><span>小米电视 大师 77" OLED</span> <span id="memery">77英寸</span> <span  id="indexColor">黑色</span><span id="grayPrice" style="float: right">17999元</span></li>
                </ul>
                <div class="total-price" id="totalPrice">总计: 17999元</div>
            </div>
            <div class="btn-box">
                <div class="sale-btn">
                    <a class="btn-primary" style="font-size: 25px; background-color: red" id="buyNow" onclick="Spike()">
                        <div style="display: block" id="countDown">
                            <span>00</span>
                            <span>:</span>
                            <span>00</span>
                            <span>:</span>
                            <span>00</span>
                        </div>
                        <div style="display: none" id="rightNowBuy">
                            立即抢购
                        </div>
                        <div style="display: none" id="shutDown">
                            该商品已结束
                        </div>
                    </a>
                </div>
                <div class="favorite-btn">
                    <a class="btn-like" onclick="bian()"><i class="iconfont " id="heart">&#xe619; </i>喜欢</a>
                </div>
            </div>
            <div class="after-sale-info">
                    <span>
                        <a href="#" class="support"><i class="iconfont">&#xeb32;</i> <em>小米自营</em></a>
                    </span>
                <span>
                        <a href="#" class="support"><i class="iconfont">&#xeb32;</i> <em>小米发货</em></a>
                    </span>
                <span>
                        <a href="#" class="support"><i class="iconfont">&#xeb32;</i> <em>7天无理由退货</em></a>
                    </span>
                <span>
                        <a href="#" class="support"><i class="iconfont">&#xeb32;</i> <em>运费说明</em></a>
                    </span>
                <span>
                        <a href="#" class="support"><i class="iconfont">&#xeb32;</i> <em>企业信息</em></a>
                    </span>
                <span>
                        <a href="#" class="support"><i class="iconfont">&#xeb32;</i> <em>价格保护</em></a>
                    </span>
            </div>
        </div>
    </div>
</div>
</div>

<!-- 底部： 价格说明 -->
<div class="prices-explanation">
    <div class="explanation-name">
        <h3>价格说明</h3>
    </div>
    <div class="explanation-content">
        <img src="/mi/imgs/price-explanation.jpeg">
    </div>
</div>



<script src="/mi/plugins/layui-v2.6.8/layui/layui.js"></script>
<script src="/mi/plugins/jquery/jquery.min.js"></script>
<script src="/mi/plugins/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>


<%@include file="../common/page-bottom.jsp"%>

<input type="hidden" value="${seckillTime}" id="seckillTime">
<input type="hidden" value="${lastTime}" id="lastTime">
<script>
    // 主页小米秒杀倒计时
    // var list_limit = document.getElementById("list-limit");
    // var fastLTimeSpans = list_limit.getElementsByTagName("div");

    var seckill = new Date(parseInt(document.getElementById("seckillTime").value));
    let now = new Date();
    var times = (seckill - now) / 1000;
    var countDown = document.getElementById("countDown");
    var rightNowBuy = document.getElementById("rightNowBuy");
    let lastTime = parseInt(document.getElementById("lastTime").value);
    if(lastTime <= 0){
        let buyNow = document.getElementById("buyNow");
        document.getElementById("shutDown").style.display = "block";
        rightNowBuy.style.display = "none";
        buyNow.style.backgroundColor = "rgb(176, 176, 176)";
        rightNowBuy.innerText = "抢购结束"
    }


    if(times <= 0) {
        countDown.style.display = "none";
        rightNowBuy.style.display = "block";
    }
    $(function () {

        var hours = 0;
        var minutes = 0;
        var seconds = 0;


        setInterval(function () {
            times--;
            if(times <= 0) {
                countDown.style.display = "none";
                rightNowBuy.style.display = "block";
                return;
            }
            hours = Math.floor((times / 60 / 60 ) % 24);
            minutes = Math.floor((times / 60) % 60);
            seconds = Math.floor(times % 60);
            hours = hours >= 10 ? hours : "0" + hours;
            minutes = minutes >= 10 ? minutes : "0" + minutes;
            seconds = seconds >= 10 ? seconds : "0" + seconds;
            countDown.children[0].innerHTML = hours;
            countDown.children[2].innerHTML = minutes;
            countDown.children[4].innerHTML = seconds;
        },1000);
    })


    function Spike() {
        $.post('/mi/tvSeckill',{killId:1},function (res) {
            if (res.code=="200"){
                layer.msg(res.data,{icon:1});
            }else {
                layer.msg(res.data,{icon:2});
            }
        })
    }
</script>


</body>

</html>